﻿@model Mailias.UI.Web.Models.MessagesIndexViewModel

@{
    ViewBag.Title = "User";
}

<h2>User's Messages</h2>

<div class="">
    <table class="tablesorter">
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var message in Model.MessageList)
            {
                <tr data-id="@message.Id" >
                    <td>@message.From</td>
                    <td>@message.To</td>
                    <td>@message.GetSubject()</td>
                    <td>@message.CreatedOn</td>
                    <td>
                        <a href="/Messages/Subscribe/@message.Id" class="subscribe" data-to="@message.GetToForDisplay()" >Subscribe</a>
                        &nbsp;|&nbsp;
                        <a href="/Messages/Delete/@message.Id" class="delete">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
                <tfoot>
            <tr>
                <td colspan="6">
                    <form>
                    <div id="pager" class="tablesorterPager">
                        <img src="@Url.Content("~/Scripts/jquery.tablesorter/blue/first.png")" class="first"/>
                        <img src="@Url.Content("~/Scripts/jquery.tablesorter/blue/prev.png")" class="prev"/>
                        <input type="text" class="pagedisplay disabled"></input>
                        <!-- this can be any element, including an input -->
                        <img src="@Url.Content("~/Scripts/jquery.tablesorter/blue/next.png")" class="next"/>
                        <img src="@Url.Content("~/Scripts/jquery.tablesorter/blue/last.png")" class="last"/>
                        <select class="pagesize">
                            <option selected="selected" value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                    </div>
                    </form>
                </td>
            </tr>
        </tfoot>

    </table>
</div>

<div class="">
    <fieldset>
        <legend>Body</legend>
        <span id="messageBody"></span>
    </fieldset>
</div>
<div class="clear"></div>

@section javascript
{
    <script type="text/javascript">
        $().ready(function () {
            $("tr").bind("click", function () {
                var body = $(this).data("body");
                var url = '/Messages/Body/' + $(this).data("id");
                $("#messageBody").load(url);
                $("tr").each(function (index) {
                    $(this).removeClass("selected");
                });
                $(this).addClass("selected");
            });

            $(".subscribe").each(function (index) {
                var to = $(this).data("to");
                var url = '/Messages/IsSubscribed/' + to;
                var link = $(this);
                $.get(url, function (data) {
                    if (data == true)
                        $(link)
                            .bind('click', function (event) {
                                event.preventDefault();
                            })
                            .fadeTo('slow', 0.3)
                            ;
                });

            });
        })        
    </script>
}

